<template>
  <div class="dialog">
    <el-form ref="result" :model="result" :rules="formRules">
      <el-form-item v-for="(item,key) in displayTemplate" :key="key" label-width="10rem" :label="item.name || key" :prop="key">
        <el-switch v-if="item.bool" v-model="result[item.bind]" :disabled="item.readonly" />
        <el-select v-else v-model="result[item.bind]" :disabled="item.readonly" placeholder="请选择" @change="initData">
          <el-option v-for="optionItem in options[key]" :key="optionItem.uid" :value="optionItem.uid" :label="optionItem.name" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="submit('result',result)">确 定</el-button>
      <el-button type="primary" @click="$emit('cancel', $event)">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'EditRelationModel',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    option: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      defaultInput: '---请输入---',
      defaultOption: { uid: null, value: null, name: '---请选择---' },
      result: { ...this.data },
      formRules: {
        name: [{ required: true, message: '请输入名称' }, {
          validator: function(rule, value, callback) {
            if (value.indexOf('.') !== -1) {
              callback(new Error('名称中不能出现小数点'))
            } else {
              callback()
            }
          }
        }],
        id: [{ required: true, message: '请输入身份标识' }],
        value: [{ required: true, message: '请输入属性值' }]
      },
      targetOption: [],
      originOption: []
    }
  },
  computed: {
    ...mapState({
      display: state => state.systemProfile.display,
      relation: state => state.systemProfile.relation,
      service: state => state.service
    }),
    options() {
      return {
        relation_name: this.relation,
        target_name: this.targetOption,
        origin_name: this.originOption
      }
    },
    displayTemplate() {
      return Object.keys(this.data).reduce((result, key) => (
        this.display[key] && this.display[key].show
          ? { ...result, [key]: this.display[key] }
          : result), {})
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      await this.getOptions()
    },
    async getOptions() {
      // 获取下拉列表
      let result = await this.service.getCi({ category_uid: this.relation.find(n => n.uid === this.result.relation_uid).target_uid })
      if (result.flag && result.data && result.data !== null) {
        this.targetOption = result.data
      }
      result = await this.service.getCi({ category_uid: this.relation.find(n => n.uid === this.result.relation_uid).origin_uid })
      if (result.flag && result.data && result.data !== null) {
        this.originOption = result.data
      }
    },
    submit(form, data) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$emit('submit', data)
        } else {
          this.$message.error('请按要求填写！')
          return false
        }
      })
    }
  }
}
</script>
